<template>
  <div>
    <div class="hmhot">
      <div class="hotop">
        <div>云音乐</div>
        <div class="htotp_h">热歌榜</div>
        <div class="htotp_e">
          <!-- {{ rank.updateTime | formatTimer }} -->
          更新日期: {{ rank | formatTimer }}
        </div>
      </div>
    </div>
    <song
      v-for="(item, index) in songs"
      :key="index"
      :id_list="id_list"
      :ids="index"
      :song_data="{
        song_index: (index + 1).toString().padStart(2, '0'),
        song_name: item.name,
        song_ar: item.ar,
        song_people: item.al.name,
        id: item.id,
      }"
    >
      <div class="m_sg" :class="index < 3 ? 'msg' : ''">
        {{ (index + 1).toString().padStart(2, "0") }}
      </div>
    </song>
    <!-- <ul class="hotcont">
      <li class="m_sglst" v-for="(item, index) in songs" :key="index">
        <div class="m_list">
          <div class="m_sg" :class="index < 3 ? 'msg' : ''">
            {{ (index + 1).toString().padStart(2, "0") }}
          </div>
          <div class="m_sgch">
            <div class="ms">
              {{ item.name }}
            </div>
            <div class="mh">{{ item.ar[0].name }} - {{ item.al.name }}</div>
          </div>
        </div> -->

    <!-- 右边 -->
    <!-- <div class="m_sgfr">
          <svg class="icon icon_a" aria-hidden="true" @click="playMusic(item)">
            <use xlink:href="#iconbofang"></use>
          </svg>
        </div>
      </li>
    </ul> -->
  </div>
</template>

<script>
import { get_detail } from "../../api/rank";
import { get_song_detail } from "../../api/common";
import song from "../../components/song";
export default {
  data() {
    return {
      songs: [],
      rank: "",
    };
  },
  components: {
    song,
  },
  computed: {
    // 使用计算属性筛选出新歌榜所以id的集合
    id_list() {
      return this.songs.map((el) => el.id);
    },
  },
  methods: {
    playMusic(e) {
      this.$store.state.songId = e.id;
      this.$store.state.songUrl = e.al.picUrl;
      console.log(this.$store.state.songId);
    },
  },
  filters: {
    formatTimer(val) {
      let date = new Date(val);
      let month = date.getMonth();
      let day = date.getDate();
      return month + "月" + day + "日";
    },
  },
  created() {
    get_detail().then((res) => {
      console.log(res.data);
      this.songs = res.data.playlist.tracks.slice(0, 30);
      this.rank = res.data.playlist.updateTime;
    });
    get_song_detail(558071673).then((res) => {
      console.log(res);
    });
  },
};
</script>

<style lang="scss" scoped>
.hmhot {
  .hotop {
    padding: 73px 0 20px 18px;

    background-color: #a65343;
    height: 210px;
    position: relative;
    color: #fff;
    text-align: left;
    .htotp_t {
      font-size: 10px;
      position: absolute;
      top: 29%;
    }
    .htotp_h {
      font-size: 40px;
    }
    .htotp_e {
      color: hsla(0, 0%, 100%, 0.8);
      font-size: 12px;
      margin-top: 5px;
    }
  }
}
.msg {
  color: red;
}

.m_sg {
  font-size: 17px;
  margin-top: 15px;
}
</style>
